<template>
  <el-dialog
    :title="'选择列表'"
    :close-on-click-modal="false"
    width="60%"
    center="true"
    :visible.sync="visible"
  style="overflow-y: hidden">
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="表名">
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" icon="el-icon-download" @click="batchGeneratorCode()">批量代码生成</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        ref="tables"
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        height="370px"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="tableName"
          header-align="center"
          align="center"
          label="表名称">
        </el-table-column>
        <el-table-column
          prop="tableComment"
          header-align="center"
          align="center"
          label="注释">
        </el-table-column>
        <el-table-column
          prop="engine"
          header-align="center"
          align="center"
          label="数据库引擎">
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="generatorCode(scope.row.tableName)">代码生成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
  /* eslint-disable no-unused-expressions,no-unused-vars,handle-callback-err */

  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataBaseName: '',
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListSelections: [],
        visible: false,
        dataListLoading: false
      }
    },
    methods: {
      init: function (dataBaseName) {
        this.dataBaseName = dataBaseName
        this.visible = true
        this.dataForm.key = ''
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/generator/selectTablePage'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'dataBaseName': this.dataBaseName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      generatorCode (tableName) {
        this.$http({
          url: this.$http.adornUrl('/generator/generateCode'),
          method: 'post',
          responseType: 'blob',
          params: this.$http.adornParams({
            'tables': tableName,
            'dataBaseName': this.dataBaseName
          })
        }).then(response => {
          this.download(response.data)
        }).catch((error) => {
          console.log(error)
          this.$message({
            message: '生成失败',
            type: 'error'
          })
        })
      },
      batchGeneratorCode () {
        let tables = ''
        let selects = this.$refs.tables.selection
        if (selects.length > 0) {
          selects.forEach(item => {
            tables += (',' + item.tableName)
          })
        }
        tables = tables.substr(1)

        this.$http({
          url: this.$http.adornUrl('/generator/generateCode'),
          method: 'post',
          responseType: 'blob',
          params: this.$http.adornParams({
            'tables': tables,
            'dataBaseName': this.dataBaseName
          })
        }).then(response => {
          this.download(response.data)
        }).catch((error) => {
          console.log(error)
          this.$message({
            message: '生成失败',
            type: 'error'
          })
        })
      },

      // 下载文件
      download (data) {
        console.log(data)
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '代码.zip')
        document.body.appendChild(link)
        link.click()
      }
    }
  }
</script>
